<template>
  <el-dialog
      title="邀请设置"
      :visible.sync="visible"
      width="45%"
      :before-close="handleClose">
      <div slot="title">
        邀请设置
        <el-tooltip class="item" effect="dark" placement="top">
          <div slot="content">此处设置对所有主体下的全部群活码生效<br/>如：企微号A关闭邀请开关，则所有群活<br/>码中有该企微号的群，该企微号均不参与<br/>拉人入群动作。</div>
          <svg-icon icon-class="iquestion"/>
        </el-tooltip>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id"label="企微号" width="300px">
          <template slot-scope="scope">
            <div class="account-column-item">
              <img class="accunt-acover" src="https://wework.qpic.cn/wwpic/177031_HhrnVYv6QQSgQ2C_1686909054/0" />
              <div class="account-info">
                <div class="name">闵雨薇</div>
                <div class="group">@志新</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="login_status" label="登录状态">
          <template slot-scope="scope">
            <div class="login-status-item">
              <span class="round"></span>
              <span class="status-text">离线</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="invite_status" label="邀请状态">
          <template slot-scope="scope">
            <div class="invite-status-item">
              <span>邀请中</span>
              <el-switch v-model="checked" size="small" />
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <div class="lf-content">
          <div class="agree-tips">
            <el-checkbox v-model="checked" />
            <span class="tip">企微号异常，自动停止邀请入群</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <div slot="content">拉人中的企微号出现异常时，自动停<br/>止邀请(由于企微官方异常提示无法区<br/>分来源，故勾选本顶后，只要企微号<br/>出现异常就会自动停止邀请）。</div>
              <svg-icon icon-class="iquestion" style="margin-left: 8px;"/>
            </el-tooltip>
          </div>
          <div class="agree-tips">
            <el-checkbox v-model="checked" />
            <span class="tip">异常停止邀请自动恢复</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <div slot="content">因企微号异常自动停止邀清的企微<br/>号，在24小时后自动开启邀请（手动<br/>停止邀请的号不受影响）。</div>
              <svg-icon icon-class="iquestion" style="margin-left: 8px;"/>
            </el-tooltip>
          </div>
        </div>
        <el-button size="small">关 闭</el-button>
      </div>
    </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      value: null,
      checked: true,
      tableData: [{id: '1',login_status: true,invite_status: true}]
    }
  },
  props: ['visible'],
  methods: {

  }
}
</script>
<style lang="scss" scoped>
.set-talke-content {
  font-size: 14px;
  line-height: 22px;
  display: flex;
  align-items: center;
}
.account-column-item {
  display: flex;
  align-items: center;
  .accunt-acover {
    width: 40px;
    height: 40px;
  }
  .account-info {
    margin-left: 8px;
    .name {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #222333;
    }
    .group {
      font-size: 12px;
      color: #f08b00;
      display: flex;
      align-items: center;
    }
  }
}
.login-status-item {
  display: flex;
  align-items: center;
  .round {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d9d9d9;
  }
  .status-text {
    margin-left: 8px;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
  }
}
.invite-status-item {
  display: flex;
  align-content: center;
  span {
    font-size: 14px;
    line-height: 22px;
    color: rgba(0, 0, 0, .85);
    margin-right: 8px;
  }
}
.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px;
  background: #fafafa;
  .lf-content {
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    .agree-tips {
      &:not(:first-child) {
        margin-left: 16px;
      }
      .tip {
        margin-left: 8px;
      }
    }
  }
}
</style>